<template>
    <div style="width:100%；">
        <a-list :grid="{ gutter: 16, column: 4 }" :pagination="pagination" :data-source="list_data">
            <a-list-item slot="renderItem" slot-scope="item">
                <a-card hoverable style="width: 200px">
                    <img
                        slot="cover"
                        alt="example"
                        :src="item.main_img"
                    />
                    <template slot="actions" class="ant-card-actions">
                        <a-icon key="setting" type="setting" />
                        <a-icon key="edit" type="edit" />
                        <a-icon key="ellipsis" type="ellipsis" />
                    </template>
                    <a-card-meta :title="item.title" :description="item.content">
                    </a-card-meta>
                </a-card>
            </a-list-item>
        </a-list>
    </div>
</template>

<script>
export default {
    data() {
        return {
            "list_data"  : [],
            "pagination"    : {
                onChange: page => {
                    this.buildListData();
                },
                pageSize: 12,
            },
        }
    },
    mounted(){
        this.buildListData();
    },
    methods:{
        buildListData(){
            var list_data = [];
            for (let i = 0; i < 23; i++) {
                list_data.push({
                    "title" : `APP ${i+1}`,
                    "avatar"    : 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                    "main_img"       : 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
                    "content"   :'是的，这里是APP 的简介…… 扒拉扒拉………… over;',
                });
            }
            this.list_data = list_data;
        },
    }
}
</script>


<style lang="less" scoped>

</style>